<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Zones throttle</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="../dist/zone.js"></script>
    <script src="../dist/long-stack-trace-zone.js"></script>
  </head>
  <body>
    <h1>Throttle Example</h1>

    <button id="b2">Error</button>

    <script>
      /*
       * In this example, we have a button that makes some request
       * to our server. We want to only make the request once per
       * 1s, so we use a `throttle` helper. If the request fails,
       * it's difficult to see where the failure originated from.
       *
       * Thankfully, we can use zones to preserve the stack even
       * across async tasks to get a better picture of the control
       * flow of the app.
       */

      var throttleMakeRequest;

      /*
       * Start the app
       * Bind listeners
       */
      function bootstrap () {
        b2.addEventListener('click', throttleMakeRequest);
      }

      /*
       * Makes a request to the server
       * Will only make the request once every 1000ms
       */
      throttleMakeRequest = throttle(function () {
        makeRequestToServer(handleServerResponse);
      }, 1000);


      /*
       * Pretend this makes a request to a server
       */
      function makeRequestToServer (cb) {
        setTimeout(cb, 100);
      }


      function handleServerResponse (err, data) {
        throw new Error('Oops');
      }


      /*
       * Returns a fn that can only be called once
       * per `time` milliseconds
       */
      function throttle (fn, time) {
        var id = null;
        if (typeof time !== 'number') {
          time = 0;
        }
        return function () {
          if (!id) {
            id = setTimeout(function () {
              id = null;
              fn();
            }, time);
          }
        };
      }

      /*
       * Start the application
       *
       * If we start the application with `zone.run`, we
       * get long stack traces in the console!
       */

      //bootstrap();
      Zone.current.fork(Zone.longStackTraceZoneSpec).run(bootstrap);
    </script>
  </body>
</html>
